<script setup>
import { ref, onMounted } from 'vue';

const loaded = ref(false);

onMounted(() => {
  document.fonts.ready.then(() => {
    loaded.value = true;
  });
});
</script>

<template>
  <div class="w-screen h-screen overflow-auto">
    <div v-if="loaded" class="w-2xl mx-auto py-8 max-md:w-full max-md:px-4">
      <h1 class="text-5xl max-md:text-4xl">
        <router-link to="/">SaltedFish964's Blog</router-link>
      </h1>
      <router-view></router-view>
    </div>
    <div v-else class="loading-contant">
      <div class="loading">
        <svg width="64px" height="48px">
          <polyline
            points="0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24"
            id="back"
          ></polyline>
          <polyline
            points="0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24"
            id="front"
          ></polyline>
        </svg>
      </div>
    </div>
  </div>
</template>

<style scoped>
.loading-contant {
  background: #212121;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading svg polyline {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loading svg polyline#back {
  fill: none;
  stroke: #ff4d5033;
}

.loading svg polyline#front {
  fill: none;
  stroke: #ff4d4f;
  stroke-dasharray: 48, 144;
  stroke-dashoffset: 192;
  animation: loading 1.4s linear infinite;
}

@keyframes loading {
  72.5% {
    opacity: 0;
  }

  to {
    stroke-dashoffset: 0;
  }
}
</style>
